<template>
  <div class="about">
    <Header />
    <div class="about_img111">
      <img :src="baseURL + img" alt="" />
    </div>
    <!-- about页面 -->
    <div class="about_test">
      <!-- 公司领导 -->
      <div v-if="type == 17">
        <div class="about_title">
          <!-- <span>{{ about.title }}</span> -->
          <span>公司领导</span>
        </div>
        <div class="about_disBox">
          <div class="about_biBox">
            <div
              class="about_box"
              v-for="(item, index) in getTeam.data"
              :key="index"
            >
              <div class="about_img">
                <img :src="baseURL + item.image" alt="" />
              </div>
              <div class="about_name">{{ item.name }}</div>
              <div class="about_position">
                <div>{{ item.desc }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="paging">
          <van-pagination
            v-model="currentPage"
            :page-count="pageCount"
            @change="change1(currentPage)"
          />
        </div>
      </div>
      <!-- 业务团队 -->
      <div v-if="type == 18">
        <div class="about_title">
          <!-- <span>{{ about.title }}</span> -->
          <span>业务团队</span>
        </div>
        <div class="disbox">
          <div class="about_biBox1">
            <div
              class="about_box1"
              v-for="(item, index) in getTeam.data"
              :key="index"
            >
              <div class="about_img1">
                <img :src="baseURL + item.image" alt="" />
              </div>
              <div class="about_name1">{{ item.name }}</div>
              <div class="about_position1">{{ item.desc }}</div>
            </div>
          </div>
        </div>
        <div class="paging">
          <van-pagination
            v-model="currentPage"
            :page-count="pageCount"
            @change="change1(currentPage)"
          />
        </div>
      </div>
      <!-- 城市事业部 -->
      <div v-if="type == 19">
        <div class="about_title">
          <!-- <span>{{ about.title }}</span> -->
          <span>城市事业部</span>
        </div>
        <div class="aboutThree_box">
          <div
            class="aboutThree_item"
            v-for="(item, index) in getTeam.data"
            :key="index"
          >
            <div class="aboutThree_left"></div>
            <div class="aboutThree_right">
              <div class="aboutRight_top">
                <span>{{ item.name }}</span>
                <img src="../assets/image/dou.png" alt="" />
              </div>
              <div class="aboutRight_bottom">{{ item.desc }}</div>
            </div>
          </div>
        </div>
        <div class="paging">
          <van-pagination
            v-model="currentPage"
            :page-count="pageCount"
            @change="change1(currentPage)"
          />
        </div>
      </div>
      <!-- 发展历程 -->
      <div v-if="type == 10">
        <div class="about_title">
          <span>总体战略</span>
        </div>
        <div class="strain">
          <div
            class="strain_item"
            v-for="(item1, index1) in 4"
            :key="index1"
            @click="toggle(index1)"
          >
            <div
              class="stranItem_left"
              v-bind:class="{ active: index1 == index2 }"
            >
              第{{ ++index1 }}次创业
            </div>
            <div class="stranItem_right">
              <img src="@/assets/image/you.png" alt="" />
            </div>
          </div>
        </div>
        <div class="strain_box">
          <div v-for="(item, index) in getStrategy.honer" :key="index">
            <!-- one -->
            <div class="strainItem_one" v-if="100 % index == 0">
              <div class="item_left">
                <span>{{ item.year }}</span
                >年<span>{{ item.month }}</span
                >月
              </div>
              <div class="item_middle"></div>
              <div class="item_right">
                <div class="itemRight">
                  {{ item.details }}
                </div>
              </div>
            </div>
            <!-- two -->
            <div class="strainItem_two" v-if="100 % index != 0">
              <div class="item_right">
                <div class="itemRight">
                  {{ item.details }}
                </div>
              </div>
              <div class="item_middle"></div>
              <div class="item_left">
                <span>{{ item.year }}</span
                >年<span>{{ item.month }}</span
                >月
              </div>
            </div>
          </div>
          <!-- line -->
          <div class="line"></div>
        </div>
      </div>
      <!-- 核心业务 -->
      <div v-if="type == 11">
        <div class="about_title">
          <span>核心业务</span>
        </div>
        <div class="aboutHexin_box">
          <div
            class="about_hexin"
            v-for="(item, index) in getBusiness"
            :key="index"
          >
            <div class="aboutImg_font">中创咨询</div>
            <div class="hexin_img" v-html="item.content"></div>
          </div>
        </div>
      </div>
      <!-- 客户群体 -->
      <div v-if="type == 13">
        <div class="about_title">
          <!-- <span>{{ about.title }}</span> -->
          <span>客户群体</span>
        </div>
        <div class="about_kehu">
          <div
            class="about_kehu_box"
            v-for="(item, index) in getCustomer.article"
            :key="index"
          >
            <div class="about_kehu_left">
              <img :src="baseURL + item.image" alt="" />
            </div>
            <div class="about_kehu_right">
              <span class="about_kehu_title">{{ item.title }}</span>
              <div class="about_kehu_font" v-html="item.content"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 服务体系 -->
      <div v-if="type == 12">
        <div class="about_title">
          <!-- <span>{{ about.title }}</span> -->
          <span>服务体系</span>
        </div>
        <div class="serve">
          <div class="serve_top">
            <div class="serveTop_title">服务理念</div>
            <div
              class="serveBottom"
              v-for="(item, index) in getSystems.honer"
              :key="index"
            >
              <div class="serveBottom_left"></div>
              <div class="serveBottom_right">
                {{ item }}
              </div>
            </div>
          </div>
        </div>
        <div class="server_diqu">
          <div class="serverDiqu_title">服务地区</div>
          <div class="serverDiqu_item">
            <img :src="baseURL + getSystems.region" alt="" />
          </div>
          <div class="diming">
            <div class="diming_item">
              <div class="diming_left"></div>
              <div class="diming_font">河南</div>
            </div>
            <div class="diming_item">
              <div class="diming_left"></div>
              <div class="diming_font">湖北</div>
            </div>
            <div class="diming_item">
              <div class="diming_left"></div>
              <div class="diming_font">广东</div>
            </div>
            <div class="diming_item">
              <div class="diming_left"></div>
              <div class="diming_font">北京</div>
            </div>
          </div>
        </div>
        <div class="server_lingqu">
          <div class="serverLingyu_title">服务领域</div>
          <div class="lingyu_box">
            <div
              class="lingyu_item"
              v-for="(item, index) in getSystems.field"
              :key="index"
            >
              <div class="lingyu_img">
                <img :src="baseURL + item.image" alt="" />
              </div>
              <div class="lingyu_font">{{ item.title }}</div>
            </div>
          </div>
        </div>
        <div class="rencai">
          <div
            class="rencai_item"
            v-for="(item, index) in getSystems.pic"
            :key="index"
          >
            <div class="rencai_img">
              <img :src="baseURL + item.image" alt="" />
            </div>
            <div class="rencai_font">人才测评</div>
          </div>
        </div>
      </div>
      <!-- 公司文化 -->
      <div v-if="type == 8">
        <div class="wenhua">
          <div class="wenhua_font">公司文化</div>
        </div>
        <div class="index_about">
          <div
            class="index_about_item"
            v-for="(item, index) in getCulture.information"
            :key="index"
            @click="toindexAbout(item.cate.id)"
          >
            <div class="index_about_item_name" style="margin-bottom: 17px">
              {{ item.cate.title }}
            </div>
            <div class="index_about_item_img">
              <img :src="baseURL + item.cate.image" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 公司荣誉 -->
      <div v-if="type == 9">
        <div class="hero">
          <div class="hero_title"><p>荣誉</p></div>
          <div class="hero_bottom">
            <div class="heroBottom_title">
              <div
                v-for="(item, index) in Title"
                :key="index"
                @click="TilteTogg(index)"
                :class="index == index1 ? 'activeColor' : ''"
              >
                {{ item.title }}
              </div>
            </div>
            <div class="heroBox">
              <div class="hero_box">
                <div
                  class="hero_item"
                  v-for="(item, index) in getHoner2"
                  :key="index"
                >
                  <div class="hero_item_left">{{ item.title }}</div>
                  <div class="hero_item_right">
                    <img
                      src="../assets/image/tupian.png"
                      alt=""
                      @click="Imge(index)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="footer_top">
        <div class="footer_item">
          <div class="footer_box" v-for="(item, index) in about" :key="index">
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="footer_middle">
        <div class="footer_middle_top">
          <div class="footer_middleTop_font">友情链接:</div>
          <a href="http://www.jd.com">京东</a>
          <a href="http://www.baidu.com">百度</a>
          <a href="http://www.taobao.com">淘宝</a>
        </div>
        <div class="footer_middle_middle">
          Copytight © <a href="">www.zhongchuangzixun.com,</a> 2014.
          中创咨询有限公司 版权所有
        </div>
        <div class="footer_middle_bottom">
          <a href=""
            >地址: 北京朝阳区 北苑路86号院(嘉铭桐城)E区213号楼一致三层
            <a href="https://beian.miit.gov.cn">京ICP备06033816号</a>
            技术支持:中创咨询</a
          >
        </div>
      </div>
      <div class="footer_about">
        <div class="bottom-left">
          <div class="phone icon1">
            <van-icon name="phone-o" color="#afafaf" />
            <span>电话：{{ companyMsg.phone }}</span>
          </div>
          <div class="phone icon2">
            <van-icon name="location-o" color="#afafaf" />
            <span>{{ companyMsg.address }}</span>
          </div>
        </div>
        <div class="bottom_right">
          <img :src="baseURL + companyMsg.codeimage" alt="" />
        </div>
      </div>
    </div>
    <!-- 弹出层 -->
    <van-popup v-model="imgsShow" :overlay="false" :closeable="true">
      <div class="imgs_img"><img :src="baseURL + imgs" alt="" /></div>
    </van-popup>
  </div>
</template>

<script>
import {
  getStrategy,
  getBusiness,
  getCustomer,
  getInformation,
  getTeam,
  getSystems,
  getCulture,
  getCompany,
  getHoner,
  getCompanyMsg,
} from "../api/index/index";
export default {
  data() {
    return {
      pageCount: 1,
      currentPage: 1,
      baseURL: this.$store.state.baseURL,
      img: "",
      about: [],
      type: "",
      index2: 0,
      //总体战略
      getStrategy: {},
      getStrategyHoner: [],
      //核心业务
      getBusiness: [],
      //服务体系
      getSystems: [],
      //客户群体
      getCustomer: [],
      // 公司领导 业务团队 城市事业部
      getTeam: [],
      // 公司文化
      getCulture: [],
      //底部信息
      companyMsg: {},

      //公司荣誉
      getHoner2: [],
      //弹出图片数据
      imgs: "",
      //弹出图片显示
      imgsShow: false,
      Title: [{ title: "公司荣誉" }, { title: "组织荣誉" }],
      index1: 0,
    };
  },
  mounted() {
    var vm = this;
    vm.type = vm.$route.query.id;
    console.log(this.type);
    vm.allMethod();
  },
  methods: {
    toindexAbout(id) {
      console.log(id);
      this.$router.push("/news?id=" + id);
    },
    // 弹出图片
    Imge(index) {
      let vm = this;
      vm.imgs = vm.getHoner2[index].image;
      vm.imgsShow = true;
    },
    // 切换颜色
    TilteTogg(index) {
      this.index1 = index;
    },
    allMethod() {
      var vm = this;
      vm.getCompanyMsg();
      // 公司信息
      vm.getCompany();
      //总体战略
      if (vm.type == 10) {
        vm.getStrategy1();
      }
      //核心业务
      if (vm.type == 11) {
        vm.getBusiness1();
      }
      //服务体系
      if (vm.type == 12) {
        vm.getSystems1();
      }
      //客户群体
      if (vm.type == 13) {
        vm.getCustomer1();
      }
      // 公司新闻
      if (vm.type == 14) {
        vm.information1(14);
      }
      // 公司文化
      if (vm.type == 8) {
        vm.getCulture1(8);
      }
      // 荣誉责任
      if (vm.type == 9) {
        vm.getHoner1(9);
      }
      // 热点关注
      if (vm.type == 15) {
        vm.information1(15);
      }
      // 专家博客
      if (vm.type == 16) {
        vm.information1(16);
      }
      // 公司领导
      if (vm.type == 17) {
        vm.getTeam1({ page: vm.currentPage, id: 17 });
      }
      // 业务团队
      if (vm.type == 18) {
        vm.getTeam1({ page: vm.currentPage, id: 18 });
      }
      // 城市事业部
      if (vm.type == 19) {
        vm.getTeam1({ page: vm.currentPage, id: 19 });
      }
    },
    //底部数据
    async getCompanyMsg() {
      let vm = this;
      const res = await getCompanyMsg();
      console.log(res, "底部数据");
      vm.about = res.data.data;
    },
    //总体战略
    async getStrategy1(times) {
      let vm = this;
      const res = await getStrategy({ times: times });
      console.log(res, "总体战略");
      vm.getStrategy = res.data.data;
      vm.getStrategyHoner = res.data.data.honer;
      vm.img = res.data.data.image;
    },
    //核心业务
    async getBusiness1() {
      let vm = this;
      const res = await getBusiness();
      console.log(res, "核心业务");
      vm.getBusiness = res.data.data.business;
      vm.img = res.data.data.image;
      console.log(vm.getBusiness);
    },
    // 客户群体
    async getCustomer1() {
      let vm = this;
      const res = await getCustomer();
      console.log(res, "客户群体");
      vm.getCustomer = res.data.data;
      vm.img = res.data.data.image;
      console.log(vm.getCustomer);
    },
    //公司新闻
    async information1(id) {
      let vm = this;
      const res = await getInformation({ id: id });
      console.log(res, "公司新闻");
      vm.getInformation = res.data.data;
      vm.img = res.data.data.image;
      console.log(vm.getInformation);
    },

    //公司文化
    async getCulture1() {
      let vm = this;
      const res = await getCulture();
      console.log(res, "公司文化");
      vm.getCulture = res.data.data;
      vm.img = res.data.data.image;
      console.log(vm.getCulture);
    },
    // 服务体系
    async getSystems1(id) {
      let vm = this;
      const res = await getSystems();
      console.log(res, "服务体系");
      vm.getSystems = res.data.data;
      vm.img = res.data.data.image;
      console.log(vm.getSystems);
    },
    //公司荣誉
    async getHoner1() {
      let vm = this;
      const res = await getHoner();
      console.log(res, "公司荣誉");
      vm.getHoner2 = res.data.data.honer;
      vm.img = res.data.data.image;
      console.log(vm.getHoner2);
    },
    //公司领导
    async getTeam1(page) {
      let vm = this;
      const res = await getTeam(page);
      console.log(res, "公司领导");
      vm.getTeam = res.data.data.teams;
      vm.img = res.data.data.image;
      //总页数
      vm.pageCount = Math.ceil(vm.getTeam.total / 4);
      console.log(vm.getTeam, "公司领导");
    },
    // 分页页码发生变化回调
    change1(index) {
      var vm = this;
      console.log(index);
      vm.currentPage = index;
      this.allMethod();
    },
    // 切换
    toggle(index) {
      this.getStrategy1(index);
      console.log(index);
      this.index2 = index - 1;
    },
    // 公司信息
    async getCompany() {
      let vm = this;
      const res = await getCompany();
      console.log(res, "公司信息");
      vm.companyMsg = res.data.data;
    },
  },
  watch: {
    $route: function (to, from) {
      this.type = to.query.id;
      this.allMethod();
      location.reload();
    },
  },
};
</script>

<style lang="less" scoped>
// footer
@import url("../assets/css/footer.css");
// 公司文化
@import url("../assets/css/wenhua.css");
// 公司领导
@import url("../assets/css/leader.css");
// 业务团队
@import url("../assets/css/business.css");
//城市事业部
@import url("../assets/css/urban.css");
// 总体战略
@import url("../assets/css/strain.css");
// 核心业务
@import url("../assets/css/core.css");
// 客户群体
@import url("../assets/css/kehu.css");
// 服务体系
@import url("../assets/css/serve.css");
// 公司荣誉
@import url("../assets/css/hero.css");
// 按钮样式
.paging {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: cnter;
}
/deep/.van-pagination__item--active {
  background-color: #c4181f !important;
}
/deep/.van-pagination__item {
  box-sizing: border-box;
  width: 50px;
  min-width: 36px;
  height: 40px;
  // color: #c4181f;
  background-color: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
//激活选中的样式
.activeColor {
  color: #c4181f !important;
  border: 1px solid red !important;
}
// 关闭图标样式
/deep/ .van-popup__close-icon {
  position: absolute;
  left: 139px;
  top: -3px;
  z-index: 1;
  color: #c8c9cc;
  font-size: 22px;
  cursor: pointer;
}
.imgs_img {
  width: 158px;
  height: 115px;
  img {
    width: 100%;
    height: 100%;
  }
}
.about {
  width: 100%;
  // box-sizing: border-box;
  .about_img111 {
    width: 100%;
    height: 75px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .about_test {
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    .about_title {
      margin-top: 32px;
      text-align: center;
      padding-bottom: 19px;
      border-bottom: 1px solid #dcdcdc;
      span {
        font-size: 18px;
        line-height: 27px;
        color: #c4181f;
      }
    }
  }
}
.wenhua {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #dcdcdc;
  font-size: 16px;
  color: #c4181f;
  display: flex;
  justify-content: center;
  align-items: center;
  .wenhua_font {
  }
}
</style>